import React, { Component } from 'react';
import { Chart, Geom, Axis, Tooltip, Coord, Label, Legend, View, Guide, Shape } from 'bizcharts';
import autoHeight from '../autoHeight';
import styles from '../index.less';

// @autoHeight()
// class Pyramid extends Component {
//   render() {
//     const { title, data, padding, height, position, forceFit = true } = this.props;
//     return (
//       <div className={styles.chart}>
//         {title && <h4 style={{ marginBottom: 20 }}>{title}</h4>}
//         <Chart height={height} data={data} padding={padding} forceFit={forceFit}>
//           <Tooltip />
//           <Coord type="rect" transpose scale={[1, -1]} />
//           <Geom
//             type="intervalSymmetric"
//             position={position}
//             shape="pyramid"
//             color={['action', ['#9abcc3', '#a8e3d7', '#b58ab8']]}
//           >
//             <Legend />
//           </Geom>
//         </Chart>
//       </div>
//     );
//   }
// }
const { Text } = Guide;

@autoHeight()
class Pyramid extends Component {
  render() {
    const { title, data, padding, height, position, forceFit = true } = this.props;
    return (
      <div className={styles.chart}>
        {title && <h4 style={{ marginBottom: 20 }}>{title}</h4>}
        <Chart height={height} data={data} padding={padding} forceFit={forceFit}>
          <Tooltip showTitle={false} itemTpl='<li data-index={index} style="margin-bottom:4px;"><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}<br/><span style="padding-left: 16px">数量：{pv}</span><br/><span style="padding-left: 16px">占比：{percent}</span><br/></li>' />
          <Coord type='rect' transpose scale={[1, -1]} />
          <Legend />
          <Guide >
            {data.map((obj) => {
              return (
                <Text
                  top={true}
                  position={{
                    action: obj.action,
                    percent: 'median'
                  }}
                  content={parseInt(obj.percent * 100) + '%'}
                  style={{
                    fill: '#fff',
                    fontSize: '12',
                    textAlign: 'center',
                    shadowBlur: 2,
                    shadowColor: 'rgba(0, 0, 0, .45)'
                  }}
                />
              )
            })}
          </Guide>
          <Geom type="intervalSymmetric" position="action*percent" shape='pyramid' color={['action', ['#9abcc3', '#a8e3d7', '#b58ab8']]}
            tooltip={['action*pv*percent', (action, pv, percent) => {
              return {
                name: action,
                percent: parseInt(percent * 100) + '%',
                pv: pv
              };
            }]}
          >
            {/* <Label content={['action*pv', (action, pv) => {
              return action + ' ' + pv;
            }]}
              offset={35}
              labeLine={{
                lineWidth: 1,
                stroke: 'rgba(0, 0, 0, 0.15)'
              }}
            /> */}
          </Geom>
        </Chart>
      </div>
    );
  }
}


export default Pyramid;
